<template>
  <div class="nuoyu-main">
    <div class="nuoyu-main-header"><Header></Header></div>
    <div class="nuoyu-main-center">
      <div class="nuoyu-main-left"><Left /></div>
      <div class="nuoyu-main-floor-center">
        <div class="nuoyu-main-content">
          <Content></Content>
        </div>
        <div class="nuoyu-main-floor">
          <div>
            <Floor></Floor>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// import draggable from "vuedraggable";
import Left from "./left.vue";
import Header from "./header.vue";
import Content from "./content.vue";
import Floor from "./floor.vue";
// import { menuStore } from "@/stores/global";
import { ref, onMounted } from "vue";

// const MenuStore = menuStore();
// const menuList = ref([]);
onMounted(() => {
  // menuList.value = MenuStore.$state.menu;
});
</script>
<style lang="scss">
.nuoyu-main {
  background-color: #eee;
}
.nuoyu-main-header {
  border: 1px solid #eee;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background-color: white;
}
.nuoyu-main-left {
  margin-top: 5px;
  padding: 5px;
  background-color: white;
}

.nuoyu-main-center {
  display: flex;
  .nuoyu-main-content {
    background-color: white;
    width: 96%;
    height: 85vh;
    margin: 20px;
    overflow-y: auto;
    border-radius: 8px;
    padding: 5px;
  }
}
.nuoyu-main-floor-center {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 95%;
}
.nuoyu-main-floor {
  background-color: white;
  width: 100%;

  display: flex;
  justify-content: center;
  text-align: center;
  div {
    margin-top: 5px;
  }
}
</style>
